<template>
  <view class="add-address-container">
    <!-- 地址表单 -->
    <view class="address-form">
      <wd-cell-group title="新增地址">
        <wd-input
          label="收货人"
          v-model="form.name"
          placeholder="请输入收货人姓名"
          clearable
        />
        <wd-input
          label="手机号码"
          v-model="form.phone"
          placeholder="请输入手机号码"
          type="number"
          clearable
        />
        <wd-input
          label="所在地区"
          v-model="form.region"
          placeholder="请输入省市区"
        />
        <wd-input
          label="详细地址"
          v-model="form.detail"
          placeholder="请输入详细地址"
          clearable
        />
      </wd-cell-group>

      <!-- 省市区选择器 -->
      <!--
      <wd-area-picker
        :visible="showAreaPicker.value"
        @confirm="handleAreaConfirm"
        @close="showAreaPicker.value = false"
      />
      -->
    </view>

    <!-- 已有地址列表 -->
    <view class="existing-address" v-if="addressList.length > 0">
      <view class="section-title">已有地址</view>
      <view class="address-list">
        <view 
          v-for="(address, index) in addressList" 
          :key="index" 
          class="address-item"
        >
          <view class="address-info">
            <p class="name-phone">
              <span class="name">{{ address.name }}</span>
              <span class="phone">{{ address.phone }}</span>
            </p>
            <p class="full-address">
              {{ address.province }}{{ address.city }}{{ address.district }}{{ address.detail }}
            </p>
          </view>
          <view class="default-tag" v-if="address.is_default">默认</view>
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="save-btn-container">
      <wd-button 
        type="primary" 
        block
        :loading="loading"
        @click="handleSave"
      >保存地址</wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { request, BASE_URL } from '@/Requset/request'

// 表单数据
const form = ref({
  name: '',
  phone: '',
  province: '',
  city: '',
  district: '',
  region: '',
  detail: '',
  is_default: false
})

// 省市区选择器
const showAreaPicker = ref(false)

// 已有地址列表
const addressList = ref([])
const loading = ref(false)

// 获取地址列表
const fetchAddressList = async () => {
  try {
    const token = uni.getStorageSync('token')
    const res = await request({
      url: BASE_URL + 'api/getaddresslist',
      method: 'GET',
      header: { token }
    })
    if (res.data && res.data.status === 0) {
      addressList.value = res.data.message || []
    }
  } catch (e) {
    uni.showToast({ title: '获取地址失败', icon: 'none' })
  }
}

// 保存地址
const handleSave = async () => {
  if (!form.value.name) {
    uni.showToast({ title: '请输入收货人姓名', icon: 'none' })
    return
  }
  if (!form.value.phone) {
    uni.showToast({ title: '请输入手机号码', icon: 'none' })
    return
  }
  if (!form.value.region) {
    uni.showToast({ title: '请选择所在地区', icon: 'none' })
    return
  }
  if (!form.value.detail) {
    uni.showToast({ title: '请输入详细地址', icon: 'none' })
    return
  }

  loading.value = true
  try {
    const token = uni.getStorageSync('token')
    if (!token) {
      uni.showToast({ title: '请先登录', icon: 'none' })
      return
    }
    const [province = '', city = '', county = ''] = form.value.region.split(' ')
    const res = await request({
      url: BASE_URL + 'api/addaddress/',
      method: 'POST',
      header: { token },
      data: {
        name: form.value.name,
        tel: form.value.phone,
        province,
        city,
        county,
        addressDetail: form.value.detail,
        isDefault: form.value.is_default
      }
    })
    if (res.data && res.statusCode === 200) {
      uni.showToast({ title: '保存成功', icon: 'success' })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
      uni.showToast({ title: res.data?.message || '保存失败', icon: 'none' })
    }
  } catch (error) {
    uni.showToast({ title: '保存失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

// 初始化加载地址列表
onMounted(() => {
  fetchAddressList()
})
</script>

<style scoped>
.add-address-container {
  min-height: 100vh;
  padding-bottom: 80px;
  background-color: #f5f5f5;
}
.address-form {
  margin-bottom: 15px;
}
.existing-address {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}
.address-list {
  margin-top: 10px;
}
.address-item {
  position: relative;
  background-color: #f9f9f9;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #eee;
}
.address-info {
  flex: 1;
}
.name-phone {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 15px;
}
.name {
  font-weight: bold;
}
.phone {
  color: #666;
}
.full-address {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
.default-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: #1989fa;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}
.save-btn-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
</style>